<template>
	<view class="sh-barrage" :style="{ 'height': height + 'rpx', 'top': fixedTop + 'px' }">
		<block v-for="(item, index) in items" :key="item.id">
			<view
				class="sh-barrage-item horizontal"
				:class="item.show ? 'move' : ''"
				:style="{
					top: `${item.top}px`,
					color: item.color,
					animationDuration: `${speed}ms`
				}"
			>
				<view class="sh-barrage-item__bg" :style="{
					backgroundColor: bgColor,
				}">
					<slot :item="item"></slot>
					{{ item.text }}
				</view>
			</view>
		</block>
	</view>
</template>

<script>
import guid from './guid.js'

export default {
	name: 'sh-barrage',
	props: {
		//速度
		speed: {
			type: Number,
			default: 10000
		},
		//背景
		bgColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.3)'
		},
		//文字颜色
		foneColor: {
			type: String,
			default: '#FFFFFF'
		},
		height: {
			type: [Number, String],
			default: 80
		},
		fixedTop: {
			type: [Number, String],
			default: 68
		}
	},
	data() {
		return {
			windowWidth: 0,
			windowHeight: 0,
			setIn: null,
			items: [],
			pixelRatio: 2
		}
	},
	mounted () {
		uni.getSystemInfo({
			success: res => {
				this.windowWidth = res.windowWidth;
				this.windowHeight = res.windowHeight;
				this.pixelRatio = res.pixelRatio;
			}
		});
	},
	methods: {
		/** 随机数
		 * @param {Number} max 最大随机数
		 * @param {Number} min 最小随机数
		 */
		random (max, min) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		},
		/**
		 * 随机色值
		 */
		randomColor () {
			let str = '#';
			for (let i = 0; i < 3; i++) {
				str += Math.floor(Math.random() * 256)
					.toString(16)
					.padStart(2, '0');
			}
			return str;
		},
		/**
		 * 随机轨道定位
		 */
		channels_random () {
			let max = parseInt(this.height / this.pixelRatio);
			let _number = this.random(max, 1);
			return _number;
		},
		/**
		 * 添加
		 */
		add (item) {
			// if (this.items.length > 6) {
			// 	this.items.forEach((item, index) => {
			// 		if (!item.show) {
			// 			this.$delete(this.items, index);
			// 		}
			// 	})
			// }

			this.items.push({
				...item,
				id: guid(12),
				top: this.channels_random(),
				color: this.foneColor === '' ? this.randomColor() : this.foneColor,
				show: true
			});

			this.remove_dom(this.items.length - 1);
		},
		/**
		 * 移除
		 */
		remove_dom (index) {
			setTimeout(() => {
				this.$set(this.items[index], 'show', false);
			}, this.speed);
		}
	}
};
</script>

<style>
.sh-barrage {
	height: 20vh;
	width: 0vw;
	z-index: 3;
	position: fixed;
	top: 0;
	right: 0;
	pointer-events: none;
}
.sh-barrage-item {
	width: 100vw;
	padding: 0 10rpx;
	line-height: 1;
	border-radius: 40rpx;
	
}
.sh-barrage-item.horizontal {
	transform: translateX(100%);
	position: absolute;
	right: 0;
	height: 80rpx;
}
.sh-barrage-item__bg {
	padding: 10rpx 20rpx 10rpx 10rpx;
	border-radius: 40rpx;
	display: inline-flex;
	align-items: center;
}
.sh-barrage-item.move {
	z-index: 3;
	will-change: transform;
	animation-name: moveLeft;
	animation-timing-function: linear;
	animation-play-state: running;
}
.sh-barrage-item-text {
	font-size: 38rpx;
	color: #fff;
	font-weight: 100;
	padding: 0 20rpx;
}
@keyframes moveLeft {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@-webkit-keyframes moveLeft {
	from {
		-webkit-transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(-100%);
	}
}
</style>
